<script setup>
import { ref, reactive, inject, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
const { proxy } = getCurrentInstance()

onMounted(() => {
  window.onresize = function() {
    let resizeChart = echarts.init(document.getElementById("nutritionalechart"));
    if (resizeChart) {
      resizeChart.resize();
    }
  };
});

const props = defineProps({
  data:{
    type:Array,
    default:()=> []
  },
})
const chartData = ref(props.data);
watch(
  () => props.data,
  (newVal) => {
    chartData.value = newVal;
    if (chart) {
      initEchart();
    }
  }
)
const color = reactive(['#975fe4', '#45a5ff', '#81c926', '#7585a2', '#fad337', '#f2637b', '#ff8e49', '#37cbcb',]);

let chart;
let initEchart = () => {
  chart = echarts.init(document.getElementById("nutritionalechart"));
  let sum = chartData.value.reduce((per, cur) => Number(per) + Number(cur.value), 0);
  chart.setOption({
    title: {
      show: true,
      text: "营养价值",
      x: "19%",
      y: "35%",
      textStyle: {
        color: "#778CA2",
        fontSize: 14,
        fontWeight: "400",
      },
      textAlign: "center",
    },
    legend: {
      orient: "vertical",
      icon: "diamond",
      // eslint-disable-next-line no-dupe-keys
      icon: "circle",
      textStyle: {
        color: "#373737",
        fontSize: "12px",
        rich: {
          name: {
            color: 'rgba(0,0,0,0.65)',
            fontSize: 14,
            width:70,
            fontWeight: 400,
            padding:[0,0,0,2]
          },
          symbol:{
            color: 'rgba(0,0,0,0.45)',
            fontSize: 14,
            fontWeight: 400,
            padding:[0,0,0,4]
          },
          percent: {
            color: 'rgba(0,0,0,0.45)',
            fontSize: 14,
            fontWeight: 400,
            padding:[0,0,0,4]
          },
          value:{
            color: 'rgba(0,0,0,0.65)',
            fontSize: 14,
            fontWeight: 400,
            width:40,
            padding:[0,0,0,4]
          }
        }
      },
      top: "10%",
      right: "12%",
      itemGap: 4,
      itemHeight: 10,
      itemWidth: 10,
      data: chartData.value,
      formatter: function(name){
        let obj = {};
        if (name){
          obj = chartData.value.find(item=>item.name === name)
        }
        return `{name|${name}}{symbol| |}{value|${obj.value || 0}}{percent|${(obj.value / sum * 100).toFixed(0)}%}`
      }
    },
    series: [
      {
        name: "",
        type: "pie",
        roundCap: true,
        radius: ["55%", "70%"],
        center: ["20%", "40%"],
        startAngle: 180, //起始角度
        data: chartData.value,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 5,
          color: function (params) {
            return color[params.dataIndex]
          },
        },
        labelLine: {
          length: 8,
          length2: 16,
          lineStyle: {
            width: 1,
          },
        },
        label: {
          show: false,
          fontFamily: "ysbth",
          position: "outside",
          padding: [0, -4, 0, -4],
          formatter(params) {
            if (params.name === "") {
              return "";
            }
            return `${params.percent.toFixed(0)}%`;
          },
          color: "#fff",
          fontSize: "12px",
          lineHeight: 10,
        },
      },
    ],
  });
};

defineExpose({
  initEchart
});
</script>

<template>
  <div class="echart" id="nutritionalechart" ref="chart"></div>
</template>

<style scoped lang="scss">
#nutritionalechart {
  width: 100%;
  height: 98%;
  margin: 0 auto;
}
</style>

